<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vector animation</title>
</head>
<style>
    body{
        height:100%;
        display:flex;
        justify-content:center;
        align-items: center;
       background:#d1d1e0;
    }
    svg{
        margin:10%;
    }
</style>
<body>
    <svg width="120" height="280" viewBox="0 0 60 140" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<g>
<path d="M-17 63C-2.00008 63 -2 77 12.9999 77C27.9999 77 29 63 43 63C56.9999 63 57.5 76 72.9999 76C88.4999 76 87.9999 63 103 63V223H-17V63Z" fill="#605DDB">
<animateTransform  
        attributeName="transform"
        attributeType="XML"
        type="translate"
        dur="1.5s"
        values="-50,0;+10,0"
        repeatCount="indefinite"
    />
</path>
<path d="M0 63C14.9999 63 15 77 29.9999 77C44.9999 77 46 63 60 63C73.9999 63 74.5 76 89.9999 76C105.5 76 105 63 120 63V223H0V63Z" fill="#8684FF">
<animateTransform  
        attributeName="transform"
        attributeType="XML"
        type="translate"
        dur="1.5s"
        values="0,0;-60,0"
        repeatCount="indefinite"
    />
</path>
<animateTransform  
        attributeName="transform"
        attributeType="XML"
        type="translate"
        dur="4s"
        values="0,-75;0,+60;0,-75"
        repeatCount="indefinite"
        ease-in="cubic-bezier(0.46,0.03,0.52,0.96)"
        ease-out="cubic-bezier(0.46,0.03,0.52,0.96)"
    />
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M56 110V30C56 15.6406 44.3594 4 30 4C15.6406 4 4 15.6406 4 30V110C4 124.359 15.6406 136 30 136C44.3594 136 56 124.359 56 110ZM30 0C13.4315 0 0 13.4315 0 30V110C0 126.569 13.4315 140 30 140C46.5685 140 60 126.569 60 110V30C60 13.4315 46.5685 0 30 0Z" fill="url(#paint0_linear)" fill-opacity="0.4"/>
<circle cx="19.5" cy="14.5" r="5.5" fill="white" fill-opacity="0.7"/>
<circle cx="24" cy="16" r="2" fill="white" fill-opacity="0.8"/>
<path d="M46 127C39 133.5 26.5 137 12 125.5C31 128.5 48 114.5 54 96C53.5 113.5 53 120.5 46 127Z" fill="white" fill-opacity="0.1"/>
</g>
<defs>
<linearGradient id="paint0_linear" x1="0.500001" y1="0.999999" x2="60" y2="140" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0.8"/>
<stop offset="1" stop-color="white" stop-opacity="0.5"/>
</linearGradient>
<clipPath id="clip0">
<rect width="60" height="140" rx="30" fill="white"/>
</clipPath>
</defs>
</svg>
</body>
</html>
